<template>
  <div style="width: 80%">
    <!-- <div v-if="mode === 'DESIGN'">
      <el-button size="small" icon="el-icon-paperclip" round>选择文件</el-button>
      <ellipsis :row="1" :content="placeholder + sizeTip" hover-tip class="el-upload__tip"/>
    </div> -->
    <!-- <div v-else> -->
      <div>
        <el-upload 
        v-model:file-list="_value" 
         :limit="props.config.props.maxSize" 
          :multiple="props.config.props.maxSize > 0"        
        :auto-upload="true" 
        :before-upload="beforeUpload" 
        :on-remove="handleRemove"
        :http-request="uploadSignFile"  >
                  
          <el-button size="default" type="primary"  icon="paperclip" round>选择文件</el-button>
          <ellipsis :row="1" :content="placeholder + sizeTip" hover-tip class="el-upload__tip"/>
        </el-upload>
      </div>
  </div>
</template>

<script setup>
import {  computed } from 'vue'
import { ElMessage } from 'element-plus'
import FormComponentMixin from "../FormComponentMixin.js";
// import {  getAPI } from '/@/utils/axios-utils';
// import { SysFileApi } from '/@/api-services/api';
import { FlowUploadFormFile,FlowDeleteFormFile } from '/@/api/workflow/approvalflowUpload';

const props = defineProps({
  ...FormComponentMixin.props
})

const emit = defineEmits([...FormComponentMixin.emits])
const _value = computed(FormComponentMixin.computed._value(props, emit))



const sizeTip = computed(() => {
  if (props.config.props.fileTypes.length > 0) {
    return ` | 只允许上传[${String(props.config.props.fileTypes).replaceAll(",", "、")}]格式的文件，且单个附件不超过${props.config.props.maxSize}MB`
  }
  return props.config.props.maxSize > 0 ? ` | 单个附件不超过${props.config.props.maxSize}MB` : ''
})

const beforeUpload = (file) => {
  if(props.config.props.maxSize > 0 && file.size / 1024 / 1024 > props.config.props.maxSize) {
    ElMessage.warning(`单张图片最大不超过 ${props.config.props.maxSize}MB`)
  } else {
    return true
  }
  return false
}
const uploadSignFile = async (file) => {

	var res = await FlowUploadFormFile(file);
  if(res.data.result?.url){  
    _value.value.map((item)=>{
        if(item.uid==file.file.uid){
          item.url=res.data.result?.url;
          item.id=res.data.result?.id;
        }      
    })   
  }
}
const handleRemove = (file) => {
  _value.value.map((item,index)=>{
    if(item.uid==file.uid){   
      var params={id:item.id};      
      var res=FlowDeleteFormFile(params);
      if(res.code==200){
        _value.value.splice(index,1);
       
      }else{
         ElMessage.error(res.message);
      }
    }
  })  
}

const handlePictureCardPreview = (file) => {
  console.log(file)
}

const handleDownload = (file) => {
  console.log(file)
}
</script>
<style lang="less" scoped>

</style>
